<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>js贷款计算器</title>
		<style type="text/css">
			.output {
				font-weight: bold;
			}
			/* Calculated values in bold */
			
			#payment {
				text-decoration: underline;
			}
			/* For element with id="payment" */
			
			#graph {
				border: solid black 1px;
			}
			/* Chart has a simple border */
			
			th,
			td {
				vertical-align: top;
			}
			/* Don't center table cells */
		</style>
	</head>

	<body>
		<table>
			<tr>
				<th>输入贷款数据：</th>
				<th></th>
				<th>贷款余额,累计利益和支付利息图</th>
			</tr>
			<tr>
				<td>贷款金额(￥):</td>
				<td><input type="number" id="amount" onchange="loanManager.calculate();"></td>
				<td rowspan=8>
					<canvas id="graph" width="400" height="250"></canvas>
				</td>
			</tr>
			<tr>
				<td>年利率(%):</td>
				<td><input type="number" id="apr" onchange="loanManager.calculate();"></td>
			</tr>
			<tr>
				<td>贷款年限:</td>
				<td><input type="number" id="years" onchange="loanManager.calculate();"></td>
			</tr>
			<tr>
				<td>邮政编码 :</td>
				<td><input type="text" id="zipcode" onchange="loanManager.calculate();"></td>
			</tr>
			<tr>
				<td style="font-weight: bold;">近期还款:</td>
				<td><button id="btnCalc">计算</button></td>
			</tr>
			<tr>
				<td>月还款:</td>
				<td>￥<span class="output" id="payment"></span></td>
			</tr>
			<tr>
				<td>总还款:</td>
				<td>￥<span class="output" id="total"></span></td>
			</tr>
			<tr>
				<td>总利息:</td>
				<td>￥<span class="output" id="totalinterest"></span></td>
			</tr>
			<tr>
				<td style="font-weight: bold;">赞助商:</td>
				<td colspan=2 id="lenders">
					从以下优秀的贷款机构贷款:
					<a href="#">kao.work.net</a>,
					<a href="#">zak.net</a>
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			"use s trict";
			var amount = document.getElementById("amount"); //贷款金额
			var apr = document.getElementById("apr"); //年利率
			var years = document.getElementById("years"); //贷款年限
			var zipcode = document.getElementById("zipcode"); //邮政编码
			var btnCalc = document.getElementById("btnCalc"); //计算
			var graph = document.getElementById("graph"); //画布
			var payment = document.getElementById("payment"); //月还款
			var total = document.getElementById("total"); //总还款
			var totalinterest = document.getElementById("totalinterest"); //总利息

			var loanManager = {
				initData: function() {
					var self=this;
					this.restoreData();
					btnCalc.onclick =function () {
						self.calculate();
					}
				},
				restoreData: function() {
					if(window.localStorage && localStorage.loan_amount) {
						amount.value = localStorage.loan_amount;
						apr.value = localStorage.loan_apr;
						years.value = localStorage.loan_years;
						zipcode.value = localStorage.loan_zipcode;
						this.calculate();
					}
				},
				calculate: function() {
					var principal = parseFloat(amount.value);
					var interest = parseFloat(apr.value) / 100 / 12;
					var payments = parseFloat(years.value) * 12;
					var rate = Math.pow(1. + interest, payments);

					var monthly = (principal * rate * interest) / (rate - 1);
					if(isFinite(monthly)) {
						payment.innerHTML = monthly.toFixed(2);
						total.innerHTML = (monthly * payments).toFixed(2);
						totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2);
						this.save(amount.value, apr.value, years.value, zipcode.value);
						this.chart(principal, interest, monthly, payments);
					} else {
						total.innerHTML = ""
						totalinterest.innerHTML = "";
						this.chart();
					}
				},
				save: function(amount, apr, years, zipcode) {
					if(window.localStorage) {
						localStorage.loan_amount = amount;
						localStorage.loan_apr = apr;
						localStorage.loan_years = years;
						localStorage.loan_zipcode = zipcode;
					}
				},
				chart: function(principal, interest, monthly, payments) {
					var graph = document.getElementById("graph");
					graph.width = graph.width;
					if(arguments.length == 0 || !graph.getContext) return;
					var g = graph.getContext("2d");
					var width = graph.width,
						height = graph.height;

					function paymentToX(n) {
						return n * width / payments;
					}

					function amountToY(a) {
						return height - (a * height / (monthly * payments * 1.05));
					}
					g.moveTo(paymentToX(0), amountToY(0));
					g.lineTo(paymentToX(payments),
						amountToY(monthly * payments));
					g.lineTo(paymentToX(payments), amountToY(0));
					g.closePath();
					g.fillStyle = "#f88";
					g.fill();
					g.font = "bold 12px sans-serif";
					g.fillText("Total Interest Payments", 20, 20);
					var equity = 0;
					g.beginPath();
					g.moveTo(paymentToX(0), amountToY(0));
					for(var p = 1; p <= payments; p++) {
						var thisMonthsInterest = (principal - equity) * interest;
						equity += (monthly - thisMonthsInterest);
						g.lineTo(paymentToX(p), amountToY(equity));
					}
					g.lineTo(paymentToX(payments), amountToY(0));
					g.closePath();
					g.fillStyle = "green";
					g.fill();
					g.fillText("Total Equity", 20, 35);
					var bal = principal;
					g.beginPath();
					g.moveTo(paymentToX(0), amountToY(bal));
					for(var p = 1; p <= payments; p++) {
						var thisMonthsInterest = bal * interest;
						bal -= (monthly - thisMonthsInterest);
						g.lineTo(paymentToX(p), amountToY(bal));
					}
					g.lineWidth = 3;
					g.stroke();
					g.fillStyle = "black";
					g.fillText("Loan Balance", 20, 50);
					g.textAlign = "center";
					var y = amountToY(0);
					for(var year = 1; year * 12 <= payments; year++) {
						var x = paymentToX(year * 12);
						g.fillRect(x - 0.5, y - 3, 1, 3);
						if(year == 1) g.fillText("Year", x, y - 5);
						if(year % 5 == 0 && year * 12 !== payments)
							g.fillText(String(year), x, y - 5);
					}
					g.textAlign = "right";
					g.textBaseline = "middle";
					var ticks = [monthly * payments, principal];
					var rightEdge = paymentToX(payments);
					for(var i = 0; i < ticks.length; i++) {
						var y = amountToY(ticks[i]);
						g.fillRect(rightEdge - 3, y - 0.5, 3, 1);
						g.fillText(String(ticks[i].toFixed(0)),
							rightEdge - 5, y);
					}
				}
			};
			window.onload = function() {
				loanManager.initData();
			}
		</script>
	</body>

</html>